<script setup lang="ts">

</script>

<template>
<div style="display: flex; width: calc(100% - 60px); padding: 0px 30px; margin-top: 30px; align-items: center; justify-content: center; align-content: center;">
    <div style="width: 220px; color:#b1191a;font-family: 华文彩云; font-size: 30px; font-weight: bold; text-align: center;">
      💧简易购
    </div>
    <div style="width: calc(100% - 440px); margin-left: 40px; display: flex;">
      <div>
        <input type="text" placeholder="请输入搜索内容" style="width: 600px;display: flex; border: 2px solid #b1191a; outline:none; padding: 10.8px 16px;" />
        <div class="fontType" style="margin-top: 6px;">
          <a href="#" style="margin:10px 16px;">简易购日常</a>
          <a href="#" style="margin:10px 16px;">优惠购首发</a>
          <a href="#" class="a1" style="margin:10px 16px;">亿元优惠券</a>
          <a href="#" style="margin:10px 16px;">购机补贴</a>
          <a href="#" style="margin:10px 16px;">手机好店</a>
          <a href="#" style="margin:10px 16px;">美味土鸡</a>
          <a href="#" style="margin:10px 16px;">数码电子</a>
        </div>
      </div>
      <div>
        <span style="cursor: pointer; display: flex; color: white; background-color: #b1191a; padding: 10px 16px;">搜索</span>
        <div class="fontType" style="margin-top: 6px;"><a href="#" style="margin:10px 16px;">通信</a></div>
      </div>
    </div>
    <div class="fontType" style="width: 180px; font-size: 14px;">
      <span style="background-color: #f7f7f7; padding: 10px 16px; cursor: pointer;">
        🛒我的购物车 〉
      </span>
    </div>
 </div>

 <div style="border-bottom:2px solid #b1191a; margin-top: 20px; padding: 0px 30px; display: flex; text-align: center; align-content: center;align-items: center;">
  <span style="display: block; width: 200px; line-height: 30px; color: white; background-color: #B1191A; padding: 10px 20px;">全部商品分类</span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">服装城</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">美妆馆</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">传智超市</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">全球购</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">闪购</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">团购</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">拍卖</a></span>
  <span style="display: block; line-height: 30px; margin-left: 30px;"><a href="#">有趣</a></span>
 </div>
 <div style="margin: 20px 30px; border-bottom: 1px solid #CCCCCC; padding-bottom: 10px;">
  <a href="#">手机、数码、通讯</a>
  >	<a href="#">手机</a>
  >   <a href="#">Apple 苹果</a>
  >	<a href="#">iphone 6s plus 系类</a>
</div>

<div style="display: flex; margin: 0px 30px;">
  <div style="width: 520px; border: 1px solid #CCCCCC; padding-left: 20px;">
    <img src="../assets/images/detail.png" style="width: 100%;"/>
  </div>
  <div style="width: calc(100% - 520px);">
    <div style="padding: 10px 30px;">
      <div style="font-size: 20px; font-weight: bold;">
        Apple iPhone6s（A1700），64G玫瑰金色 移动通信电信4G手机
      </div>
      <div class="fontType" style="padding:10px 0px ;">
        推荐选择下方[移动优惠购]，手机套餐齐搞定，不用换号，每月还有话费返
      </div>
      <div class="fontType" style="padding:10px 20px ; background-color: #FEE9EB;">
        <span>价格</span>
        <span style="font-weight: bold; color: #B1191A;font-size: 24px;">￥5200</span>
        <span style="color: #B1191A; margin-left: 10px;">降价通知</span>
        <span style="float: right;line-height: 36px;"><a href="#">累计评价 10000条</a></span>
      </div>
      <div class="fontType" style="display: flex;margin: 14px 20px; font-size: 14px;">
        <div style="width: 80px;">支持</div>
        <div style="width: calc(100% - 60px);">以旧换新，闲置手机回收 4G套餐超值抢礼品购</div>
      </div>
      <div class="fontType" style="display: flex;margin: 14px 20px; font-size: 14px;">
        <div style="width: 80px;">配送至</div>
        <div style="width: calc(100% - 60px);">北京海定区中关 V 有货 支持 99元免运费|货到付款|211限时达 V</div>
      </div>
      <div class="fontType" style="display: flex;margin: 14px 20px; font-size: 14px;">
        <div style="width: 80px;"></div>
        <div style="width: calc(100% - 60px);">由自营发货，并提供售后服务。11：00前完成下单，预计今天（08月10日）送达</div>
      </div>
      <div class="fontType" style="display: flex;margin: 14px 20px; font-size: 14px;">
        <div style="width: 80px; line-height: 40px;">选择颜色</div>
        <div style="width: calc(100% - 60px); display: flex;">
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #B1191A; background-color: #F7F7F7;">玫瑰金</span>
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #CCCCCC; background-color: #F7F7F7;">金色</span>
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #CCCCCC; background-color: #F7F7F7;">白色</span>
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #CCCCCC; background-color: #F7F7F7;">土豪色</span>
        </div>
      </div>
      <div class="fontType" style="display: flex;margin: 14px 20px; font-size: 14px;">
        <div style="width: 80px; line-height: 40px;">选择版本</div>
        <div style="width: calc(100% - 60px); display: flex;">
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #B1191A; background-color: #F7F7F7;">移动</span>
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #CCCCCC; background-color: #F7F7F7;">电信</span>
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #CCCCCC; background-color: #F7F7F7;">联通</span>
        </div>
      </div>
      <div class="fontType" style="display: flex;margin: 14px 20px; font-size: 14px;">
        <div style="width: 80px; line-height: 40px;">选择容量</div>
        <div style="width: calc(100% - 60px); display: flex;">
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #B1191A; background-color: #F7F7F7;">10G</span>
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #CCCCCC; background-color: #F7F7F7;">64G</span>
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #CCCCCC; background-color: #F7F7F7;">128G</span>
        </div>
      </div>
      <div class="fontType" style="display: flex;margin: 14px 20px; font-size: 14px;">
        <div style="width: 80px; line-height: 40px;">购买方式</div>
        <div style="width: calc(100% - 60px); display: flex;">
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #B1191A; background-color: #F7F7F7;">官方标配</span>
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #CCCCCC; background-color: #F7F7F7;">移动优惠购</span>
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #CCCCCC; background-color: #F7F7F7;">电信优惠购</span>
        </div>
      </div>

      <div class="fontType" style="display: flex;margin: 14px 20px; font-size: 14px;">
        <div style="width: 80px; line-height: 40px;">套装</div>
        <div style="width: calc(100% - 60px); display: flex;">
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #CCCCCC; background-color: #F7F7F7;">保护套装</span>
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #CCCCCC; background-color: #F7F7F7;">充电套装</span>
        </div>
      </div>

      <div style="height: 20px;"></div>
      <div class="fontType" style="display: flex;margin: 14px 20px; font-size: 14px;">
        <div style="width: 80px; line-height: 40px;"></div>
        <div style="width: calc(100% - 60px); display: flex;">
          <span style="display: block; line-height: 40px; margin-right: 10px; padding: 0px 20px; border: 1px solid #CCCCCC; color: white; font-weight: bold; background-color: #B1191A;">加入购物车</span>
        </div>
      </div>

    </div>
  </div>
</div>

 <div style="height: 20px;"></div>
</template>
